<template>
	<div :id="echId" style="pointer-events: all;"></div>
</template>

<script>
/*
echId: echart图dom的id，必须保证整个项目内的次id不会重复
echData: echart图的数据，必须有的label（标题）和value（数据）
unit: 数据的单位
*/
export default {
	props: {
		echId: {
			type: String
		},
		echData: {
			type: Array,
			default: () => {
				return [];
			}
		},
		unit: {
			type: String,
			default: '个'
		}
	},
	computed: {
		labelArr() {
			var arr = [];
			for (var i = 0; i < this.echData.length; i++) {
				arr.push(this.echData[i].label);
			}
			return arr;
		},
		dataArr() {
			var arr = [];
			for (var i = 0; i < this.echData.length; i++) {
				arr.push({
					value: this.echData[i].value,
					name: this.echData[i].label
				});
			}
			return arr;
		}
	},
	data() {
		return {
			jishiqi1: null
		};
	},
	watch: {
		echId: {
			handler(val) {
				if (val !== null && val !== undefined && val !== '') {
					setTimeout(() => {
						this.init();
					}, 100);
				}
			},
			immediate: true
		}
	},
	methods: {
		init() {
			var dataBJ = [
				[98,74,51,6.4,84],
				[23,85,18,3.4,60],
				[45,65,65,5,70],
				[61,17,60,10,81],
				[54,25,73,0.4,72],
				[35,24,51,1.2,80],
			];
			var dataGZ = [
				[42,24,23,2,76],
				[15,12,53,3,97],
				[40,42,21,5,65],
				[14,15,23,15,68],
				[24,45,53,12,56],
				[51,74,23,4,84],
			];
			var dataSH = [
				[21,24,43,1,45],
				[42,12,64,2,85],
				[12,14,34,1,45],
				[35,24,64,3,85],
				[27,24,24,5,54],
				[17,12,14,2,75],
			];
			var lineStyle = {
				normal: {
					width: 1,
					opacity: 0.5
				}
			};
			var myChart = this.$echarts.init(document.getElementById(this.echId));
			var option = {
				tooltip: {
					show: true
				},
				legend: {
					selectedMode: 'single',
					orient: 'vertical',
					right: 5,
					data: ['2020-12-05', '2020-12-06', '2020-12-07'],
					itemGap: 20,
					textStyle: {
						color: '#fff',
						// fontSize: 5,
						fontSize: 11
					},
				},
				radar: {
					indicator: [
						{name: 'TSP', max: 120},
						{name: 'PM2.5', max: 120},
						{name: 'PM10', max: 120},
					],
					shape: 'circle',
					splitNumber: 5,
					name: {
						textStyle: {
							color: 'rgb(238, 197, 102)'
						}
					},
					splitLine: {
						lineStyle: {
							color: [
								'rgba(238, 197, 102, 0.1)',
								'rgba(238, 197, 102, 0.2)',
								'rgba(238, 197, 102, 0.4)',
								'rgba(238, 197, 102, 0.6)',
								'rgba(238, 197, 102, 0.8)',
								'rgba(238, 197, 102, 1)'
							].reverse()
						}
					},
					splitArea: {
						show: false
					},
					axisLine: {
						lineStyle: {
							color: 'rgba(238, 197, 102, 0.5)'
						}
					}
				},
				series: [
					{
						name: '2020-12-07',
						type: 'radar',
						lineStyle: lineStyle,
						data: dataBJ,
						symbol: 'none',
						itemStyle: {
							color: '#F9713C'
						},
						areaStyle: {
							opacity: 0.1
						}
					},
					{
						name: '2020-12-06',
						type: 'radar',
						lineStyle: lineStyle,
						data: dataSH,
						symbol: 'none',
						itemStyle: {
							color: '#B3E4A1'
						},
						areaStyle: {
							opacity: 0.05
						}
					},
					{
						name: '2020-12-05',
						type: 'radar',
						lineStyle: lineStyle,
						data: dataGZ,
						symbol: 'none',
						itemStyle: {
							color: 'rgb(238, 197, 102)'
						},
						areaStyle: {
							opacity: 0.05
						}
					}
				]
			};
			myChart.setOption(option);
			this.jishiqi(myChart, option);
		},
		jishiqi(myChart, option) {
			let index = 1;
			var masLength = option.series.length > 0 ? option.series[0].data.length : 0;
			myChart.dispatchAction({
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: 0
			});

			this.jishiqi1 = setInterval(() => {
				for (var i = 0; i < masLength; i++) {
					myChart.dispatchAction({
						type: 'downplay',
						seriesIndex: 0,
						dataIndex: i
					});
				}

				myChart.dispatchAction({
					type: 'highlight',
					seriesIndex: 0,
					dataIndex: index
				});
				if (index < masLength - 1) {
					index++;
				} else {
					index = 0;
				}
			}, 2000);
			document.getElementById(this.echId).addEventListener('mouseover', () => {
				for (var i = 0; i < masLength; i++) {
					myChart.dispatchAction({
						type: 'downplay',
						seriesIndex: 0,
						dataIndex: i
					});
				}
				clearInterval(this.jishiqi1);
				this.jishiqi1 = null;
			});
			document.getElementById(this.echId).addEventListener('mouseout', () => {
				this.jishiqi1 = setInterval(() => {
					for (var i = 0; i < masLength; i++) {
						myChart.dispatchAction({
							type: 'downplay',
							seriesIndex: 0,
							dataIndex: i
						});
					}

					myChart.dispatchAction({
						type: 'highlight',
						seriesIndex: 0,
						dataIndex: index
					});
					if (index < masLength - 1) {
						index++;
					} else {
						index = 0;
					}
				}, 2000);
			});
		}
	}
};
</script>

<style></style>
